<template>
  <div ref="picMediaSource" class="_components_picture-material waterfall">
    <div v-for="(item, index) in images" :key="index" ref="img" class="waterfall-item">
      <div>
        <img :src="item.path" alt="">
        <div style="border-bottom: 1px solid #eee;margin-bottom: 5px;padding-bottom: 5px">{{ item.name }}</div>
        <el-button v-if="item.asyncStatus === 0" type="text" size="mini" icon="el-icon-upload2" @click="uploadMediaSource(item.id)">同步</el-button>
        <el-dropdown style="margin: 0 0 0 10px" placement="bottom-start">
          <el-button type="text" size="mini" icon="el-icon-delete">删除</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="item.asyncStatus === 0" @click.native="del(item.id, 0)">删除公众号</el-dropdown-item>
            <el-dropdown-item @click.native="del(item.id, 1)">删除全部</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    propsList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      images: []
    }
  },
  created() {
    this.images = []
    this.images = this.propsList
  },
  methods: {
    uploadMediaSource(id) {
      this.$emit('uploadMediaSource', id)
    },
    getTag(i, id) {
      console.log(i, id)
    },
    del(id, tpye) {
      this.$emit('del', id, tpye)
    }
  }
}
</script>

<style scoped lang="scss">
.waterfall {
  width: 100%;
  column-gap:10px;
  column-count: 5;
  margin: 0 auto;
  .waterfall-item {
    padding: 10px;
    margin-bottom: 10px;
    break-inside: avoid;
    border: 1px solid #eaeaea;
    > div {
      width: 100%;
      text-align: center;
      > img {
        width: 100%;
      }
    }
  }
}
@media (min-width: 992px) and (max-width: 1300px) {
  .waterfall {
    column-count: 3;
  }
  p {
    color:red;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .waterfall {
    column-count: 2;
  }
  p {
    color: orange;
  }
}
@media (max-width: 767px) {
  .waterfall {
    column-count: 1;
  }
}
</style>
